<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
    <style>
        .box {
            width: 600px;
            height: 400px;
            border: 1px solid #999;
            display: block;
        }
    </style>
</head>

<body>
    <div id="box1" class="box"></div>
    <br>
    <div id="box2" class="box"></div>
    <br>
    <div id="box3" class="box"></div>
    <script>
        let chartA = echarts.init(document.querySelector("#box1"));
        chartA.setOption({
            title: {//包含主标题和副标题
                text: '每周降雨统计',
                subtext: "2022年9月 第四个星期",
                left: 50,//title组件离容器左侧的距离
                // left:"center"//取值:left、center、right
            },
            tooltip: {},
            legend: {//控制按钮，data里面的值和系列里 name名称一一对应，数据交互按钮
                data: ['销量']
            },
            xAxis: {//设置直角坐标系的x轴
                //完成x轴的分类描述
                data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', "星期日"],
                name: "星期",//定义x轴的名称
                nameTextStyle: {
                    color: "red"
                },
                axisLabel: {//x轴刻度标签相关定义
                    interval: 0,
                    rotate: 45//定义刻度显示的角度
                },
                type: "category"//类目轴
            },
            //设置直角坐标系的y轴
            yAxis: {
                type: "value"//数据轴
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',//设置当前图形的类型，但是要注意不同类型的图形需要使用不同的数据展示规则
                    data: [5, 20, 36, 10, 10, 20, 30],//描述当前图形需要渲染和展示的相关数据，对于bar(柱状图)而言，只需要取值一个简单的数组即可
                    label: {
                        show: true//显示数据文本
                    }
                }
            ]
        });

        let chartB = echarts.init(document.querySelector("#box2"));
        chartB.setOption({
            title: {//包含主标题和副标题
                text: '每周降雨统计',
                subtext: "2022年9月 第四个星期",
                left: 50,//title组件离容器左侧的距离
                // left:"center"//取值:left、center、right
            },

            legend: {//控制按钮，data里面的值和系列里 name名称一一对应，需要和系列对应关系完成绑定操作
                data: ['最高温度', '最低温度'],
                top: 15//距离容器上方的距离
            },
            xAxis: {//设置直角坐标系的x轴
                //完成x轴的分类描述
                data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', "星期日"],
                name: "星期",//定义x轴的名称
                nameTextStyle: {
                    color: "red"
                },
                axisLabel: {//x轴刻度标签相关定义
                    interval: 0,
                    rotate: 45//定义刻度显示的角度
                },
                type: "category"//类目轴
            },
            //设置直角坐标系的y轴
            yAxis: {
                type: "value"//数据轴
            },
            series: [
                {
                    name: '最高温度',
                    type: 'line',//设置当前图形的类型，但是要注意不同类型的图形需要使用不同的数据展示规则
                    data: [5, 20, 36, 10, 10, 20, 30],//描述当前图形需要渲染和展示的相关数据，对于bar(柱状图)而言，只需要取值一个简单的数组即可
                    label: {
                        show: true,//显示数据文本
                        position: "top",
                        formatter: function (params) {
                            return params.data + "℃";
                        }
                    }
                },
                {
                    name: '最低温度',
                    type: 'bar',//设置当前图形的类型，但是要注意不同类型的图形需要使用不同的数据展示规则
                    data: [3, 10, 16, 4, 6, 10, 20],//描述当前图形需要渲染和展示的相关数据，对于bar(柱状图)而言，只需要取值一个简单的数组即可
                    label: {
                        show: true,//显示数据文本
                        position: "top",

                        // {a}：系列名。{b}：数据名。{c}：数据值。
                        formatter: "{c}℃"


                    }
                }
            ]
        });

        let chartC = echarts.init(document.querySelector("#box3"));
        chartC.setOption({
            title: {//包含主标题和副标题
                text: '每周降雨统计',
                subtext: "2022年9月 第四个星期",
                left: 50,//title组件离容器左侧的距离
                // left:"center"//取值:left、center、right
            },
            //构建跟随鼠标的数据浮动提示框(提示框组件)
            tooltip: {
                trigger: "axis",//坐标轴触发，主要在柱状图、折线图等类目轴中石油
                formatter: function (params) {
                   
                    let axisValue = "";
                    let count = 0;
                    let dataTemp = "";
                    for (let ser of params) {
                       
                        if (axisValue == "") {
                            axisValue = ser.axisValue;
                        }
                        dataTemp += `
                            <div>
                                <span style="display:inline-block;width:10px;height:10px;border-radius:10px;background:${ser.color}"></span>
                                <span>${ser.seriesName}</span>
                                <span>${ser.data}</span>
                            </div>

                        `;

                        count += ser.value;
                    }

                    let first=`<div><span>${axisValue}</span></div>`;
                    let total = `<div>
                                <span style="display:inline-block;width:10px;height:10px;border-radius:10px;background:red;"></span>
                                <span>总计:</span>
                                <span>${count}</span>
                            </div>`;
                    console.log(dataTemp);



                    return first+dataTemp+total;
                }
            },
            legend: {//控制按钮，data里面的值和系列里 name名称一一对应，需要和系列对应关系完成绑定操作
                data: ['袜子', '鞋子'],
                top: 15//距离容器上方的距离
            },
            xAxis: {//设置直角坐标系的x轴
                //完成x轴的分类描述
                data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', "星期日"],
                name: "星期",//定义x轴的名称
                nameTextStyle: {
                    color: "red"
                },
                axisLabel: {//x轴刻度标签相关定义
                    interval: 0,
                    rotate: 45//定义刻度显示的角度
                },
                type: "category"//类目轴
            },
            //设置直角坐标系的y轴
            yAxis: {
                type: "value"//数据轴
            },
            series: [
                {
                    name: '袜子',
                    type: 'bar',//设置当前图形的类型，但是要注意不同类型的图形需要使用不同的数据展示规则
                    data: [5, 20, 36, 10, 10, 20, 30],//描述当前图形需要渲染和展示的相关数据，对于bar(柱状图)而言，只需要取值一个简单的数组即可
                    label: {
                        show: true,//显示数据文本
                        position: "top",

                    },
                    stack: "x"//完成多个柱状图在x轴上的数据堆叠
                },
                {
                    name: '鞋子',
                    type: 'bar',//设置当前图形的类型，但是要注意不同类型的图形需要使用不同的数据展示规则
                    data: [3, 10, 16, 4, 6, 10, 20],//描述当前图形需要渲染和展示的相关数据，对于bar(柱状图)而言，只需要取值一个简单的数组即可
                    label: {
                        show: true,//显示数据文本
                        position: "top"
                    },
                    stack: "x"
                }
            ]
        });
    </script>
</body>

</html>